<template>
  <div class="flex space-x-2">
    <button
      @click="changeLanguage('en')"
      :class="
        currentLang === 'en'
          ? 'bg-primary text-white'
          : 'bg-gray-200 text-gray-800'
      "
      class="px-4 py-2 rounded-md"
    >
      English
    </button>
    <button
      @click="changeLanguage('zh')"
      :class="
        currentLang === 'zh'
          ? 'bg-primary text-white'
          : 'bg-gray-200 text-gray-800'
      "
      class="px-4 py-2 rounded-md"
    >
      中文
    </button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, onMounted } from 'vue'

const { locale } = useI18n()
const currentLang = ref(locale.value)

onMounted(() => {
  console.log('SimpleLanguageSwitcher mounted')
  console.log('Current language:', locale.value)
})

const changeLanguage = (lang: string) => {
  console.log('Changing language to:', lang)
  locale.value = lang
  currentLang.value = lang
  localStorage.setItem('language', lang)
  console.log('Language changed to:', locale.value)
}
</script>
